<template>
  <div id="app">
    <el-card>
      <el-tabs v-model="Name">
        <!--手机号验证-->
        <el-tab-pane label="手机号验证" name="first">
          <el-form
            :rules="Loginforms"
            :model="LoginFrom"
            label-width="100px"
            ref="AddLoginFrom"
          >
            <el-form-item label="Phone" prop="phone">
              <el-input v-model="LoginFrom.phone">
                <el-select slot="prepend" v-model="select" placeholder="+86">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="332" value="2"></el-option>
                  <el-option label="333" value="3"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label="Password" prop="password">
              <el-input v-model="LoginFrom.password" type="password"></el-input>
            </el-form-item>
            <el-row>
              <el-button type="primary">立即注册</el-button>
              <el-button @click="login()">登录</el-button>
            </el-row>
          </el-form>
        </el-tab-pane>
        <!--邮箱验证-->
        <el-tab-pane label="邮箱验证" name="second">
          <el-form
            :rules="LoginFrom_EmailRules"
            :model="LoginFrom_Email"
            label-width="100px"
            ref="AddLoginFromEmail"
          >
            <el-form-item label="E-mail" prop="email">
              <el-input v-model="LoginFrom_Email.email"> </el-input>
              <div class="hintBox">
                <div
                  @click="setInput(mail)"
                  class="hintItem"
                  v-for="mail in emails"
                  :key="mail"
                >
                  {{ mail }}
                </div>
              </div>
            </el-form-item>
            <el-form-item label="Password" prop="password">
              <el-input
                v-model="LoginFrom_Email.password"
                type="password"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-row>
            <el-button type="primary">立即注册</el-button>
            <el-button @click="Emaillogin()">登录</el-button>
          </el-row>
        </el-tab-pane>
        <!--二维码点击跳转-->

        <el-tooltip
          class="item"
          effect="dark"
          content="二维码登录"
          placement="top"
        >
          <el-button
            type="primary"
            icon="el-icon-s-grid"
            circle
            class="btnKey"
            @click="getKey();dialogVisible = true"
           
          ></el-button>
        </el-tooltip>
        <!--二维码点击页面-->
      </el-tabs>
          <el-dialog title="登录" :visible.sync="dialogVisible"
          width="500px"
          :append-to-body="true">
<div class="indexbox">
  <el-button @click="getKeyImg()">获取二维码</el-button>
 <img :src="this.Key.qrimg" alt="">
</div>
</el-dialog>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    //手机号验证
    var checkPhone = (rule, value, callback) => {
      const reg = /^0?(13[0-9]|15[012356789]|18[0-9]|14[578]|16[6]|17[035768]|19[19])[0-9]{8}$/;
      if (reg.test(value)) {
        return callback();
      }
      callback("请输入合法的手机号");
    };
    //邮箱的验证
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    //密码验证
    return {
       dialogVisible: false,
      //切换页绑定
      Name: "first",
      //表单数据
      LoginFrom: {
        phone: "",
        password: "",
        uid:""
      },
      //邮箱数据
      LoginFrom_Email: {
        // <<<<<<< HEAD
        email: null,
        password: "",
        // =======
        email: "",
        password: "",
        // >>>>>>> 69dd64d6e151c4fd72f028cbf31eb3c74ec55316
      },
      //二维码key接收
      Key: {
        key: "",
        qrimg:""
      },
      //二维码64位获取
      sixfour:{
  keysix:'',
  img:""
      },
      select: "",
      //手机号表单验证
      Loginforms: {
        phone: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
            message: "请输入正确的手机号",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^(?![0-9]+$)(?!a-zA-Z]+$)[0-9A-Za-z\\W]{8,20}$/,
            message: "密码包含数字，字母,长度为8-20位",
          },
        ],
      },
      //邮箱表单验证
      LoginFrom_EmailRules: {
        // email: [{ validator: checkEmail, trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱地址", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            pattern: /^(?![0-9]+$)(?!a-zA-Z]+$)[0-9A-Za-z\\W]{8,20}$/,
            message: "密码包含数字，字母,长度为8-20位",
          },
        ],
      },
    };
  },
  methods: {
    //手机号的数据提交
    login() {
      this.$refs.AddLoginFrom.validate(async (valid) => {
        if (valid) {
          let res = await this.$post("/login/cellphone", this.LoginFrom);
          console.log(res);
          if (res.code !== 200) {
            return this.$message.error("登陆失败");
          }
          this.$message.success("登陆成功");
          this.LoginFrom.uid=res.account.id
          console.log(this.LoginFrom.uid)
          window.localStorage.setItem("token", JSON.stringify(res.token));
          this.$router.push("/home")
        } else {
          console.log("error");
          return false;
        }
      });
    },
    //邮箱的数据提交
    Emaillogin() {
      this.$refs.AddLoginFromEmail.validate(async (valid) => {
        if (valid) {
          let resOne = await this.$post("/login", this.LoginFrom_Email);
          console.log(resOne);
          if (resOne.code !== 200) {
            return this.$message.error("登陆失败");
          }
          this.$message.success("登陆成功");
          window.localStorage.setItem("token", JSON.stringify(res.token));
          this.$router.push("/home")
        } else {
          console.log("error");
          return false;
        }
      });
    },
    //邮箱的后缀提示
    setInput(mail) {
      console.log(mail);
      this.LoginFrom_Email.email = mail;
      // <<<<<<< HEAD
    },
    //二维码的key获取
    async getKey() {
      const { data: resKey } = await this.$get("/login/qr/key");
      this.Key.key = resKey.unikey;
      console.log(resKey);
    },//二维码图片获取
   async getKeyImg(){
      const {data :reskey}  = await this.$get("/login/qr/create",{
        key:this.Key.key,
        qrimg:true
      })
      this.Key.qrimg=reskey.qrimg
      console.log(this.Key.qrimg)
  // this.sixfour.keysix=reskey.data
    }
    // =======
  },
  // >>>>>>> 69dd64d6e151c4fd72f028cbf31eb3c74ec55316

  //邮箱后缀提醒
  computed: {
    emails() {
      // 如果inputEmail中没有任何东西，则不处理
      if (!this.LoginFrom_Email.email) return [];
      // 考虑到用户自己要输@符号，如果@符号首次出现的位置大于等于第零个位置时，则不处理
      if (this.LoginFrom_Email.email.indexOf("@") > -1) return [];
      return [
        this.LoginFrom_Email.email + "@163.com",
        this.LoginFrom_Email.email + "@126.com",
        this.LoginFrom_Email.email + "@0355.net",
        this.LoginFrom_Email.email + "@263.net",
        this.LoginFrom_Email.email + "@3721.net",
        this.LoginFrom_Email.email + "@qq.com",
        this.LoginFrom_Email.email + "@yahoo.com",
        this.LoginFrom_Email.email + "@gmail.com",
        this.LoginFrom_Email.email + "@msn.com",
        this.LoginFrom_Email.email + "@hotmail.com",
        this.LoginFrom_Email.email + "@aol.com",
        this.LoginFrom_Email.email + "@ask.com",
        this.LoginFrom_Email.email + "@live.com",
        this.LoginFrom_Email.email + "@yeah.net",
      ];
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 500px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-300px);
}
.el-input {
  width: 300px;
}
.el-row {
  display: flex;
  justify-content: flex-end;
  margin-right: 100px;
}
.el-select {
  width: 80px;
}
.hintBox {
  width: 300px;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: auto;
  position: absolute;
  z-index: 999;
  background-color: #fff;
}
.hintItem {
  margin-top: 2px;
  cursor: pointer;
  font-size: 13px;
  color: #898989;
}
.btnKey {
  position: absolute;
  right: 0;
  bottom: 0;
}
.indexbox{
  width: 200px;
  height: 200px;
}
</style>
